<template>
	<view class="content">
		<view class="f44 fwb cf">
			{{ time }}小时停车优惠券
		</view>
		<view class="f28 btn">
			打开微信，扫码领取
		</view>
		<canvas class="canvas" canvas-id="canvas"></canvas>
		<view class="f26 cf" @click="getDetail">二维码30s自动刷新一次<image src="/static/images/ic_shuaxin.png"></image></view>
	</view>
</template>

<script>
import { checkUrl } from '@/utils/common';
import { baseUrl } from '@/utils/config';
import QRCode from '@/utils/webapp-qrcode'
export default {
	data() {
		return {
			userInfo: {},
			url: '',
			timer: null,
			ScreenBrightness: '',
			time: ''
		};
	},
	onLoad() {
		this.getTime();
		this.getDetail();
		this.timer = setInterval(() => {
		  this.getDetail();
		}, 30000)
	},
	beforeDestroy() {
		if(this.timer) {
		   clearInterval(this.timer); 
		   this.timer = null;  
		} 
	},
	methods: {
		getTime() {
			this.$app.ajax({
				data: {
					param: {
						userId: uni.getStorageSync('userId')
					}
				},
				api: this.$api.pdVenuePd()
			}).then((res) => {
				if (res.errorCode != '000000') return;
				this.time = res.record
			});
		},
		// 获取会员信息
		getDetail() {
			this.$app.ajax({
				data: {
					param: {
						userId: uni.getStorageSync('userId')
					}
				},
				api: this.$api.pdQrCode()
			}).then((res) => {
				if (res.errorCode != '000000') return;
				let that = this;
				// '/pages/parking/index?id=' +
				new QRCode('canvas', {
					text: res.record,
					width: 240,
					height: 240,
					padding: 10,
					correctLevel: QRCode.CorrectLevel.L,
					callback: ss => {
						this.url = ss.path
					}
				});
			});
		}
	}
};
</script>
<style lang="scss" scoped>
  .content {
	  background: $color;
	  position: fixed;
	  left: 0;
	  right: 0;
	  bottom: 0;
	  flex-direction: column;
	  top: 0;
	  display: flex;
	  align-items: center;
	  padding-top: 110rpx;
	  box-sizing: border-box;
	  .btn {
		  line-height: 60rpx;
		  box-sizing: border-box;
		  padding: 0 30rpx;
		  margin-top: 32rpx;
		  background: #FFFFFF;
		  color: $color;
		  border-radius: 30rpx;
	  }
	  .canvas {
		  width: 520rpx;
		  height: 520rpx;
		  margin: 70rpx auto;
	  }
	  .f26 {
		  color: rgba(255, 255, 255, 0.80);
		  image {
			  vertical-align: middle;
			  width: 24rpx;
			  height: 24rpx;
			  margin-left: 6rpx;
			  display: inline-block;
		  }
	  }
  }
</style>
